<template>
  <div class="camera">
    <div class="label-out">{{$t('设备列表')}}</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column :label="$t('SN码')" property="deviceSn" />
      <el-table-column :label="$t('设备位置')" property="position" />
      <el-table-column :label="$t('启用状态')">
        <template #default="scope">
          <el-switch
            v-model="scope.row.deviceEnable"
            class="ml-2"
            inline-prompt
            size="large"
            style=" --el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
            active-text="Y"
            inactive-text="N"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('在线状态')" property="deviceOnline" >
        <template #default="scope">
          <span :style="{color: scope.row.deviceOnline === '在线' ? '#13ce66' : 'gray'}">{{scope.row.deviceOnline}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('添加时间')" property="createDate" />
      <el-table-column :label="$t('操作')" width="100">
        <template #default="scope">
          <div class="actions">
            <span class="iconfont icon-shanchu" @click="deleteItem(scope.row.id)"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[100, 200, 300, 400]"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
      />
      <span class="total">{{$t('共')}}{{ total }}{{$t('条')}}</span>
    </div>
  </div>
</template>

<script>
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { getDevicePage, deleteDevice } from '@/api/index';
  import Tab from '@/components/tab';
  export default {
    props: {
      count: {
        type: Number,
        default: 0
      }
    },
    components: { Tab },
    data() {
      return {
        total: 0,
        currentPage: 1,
        pageSize: 20,
        size: 'default',
        disabled: false,
        background: true,
        tableData: [],
      };
    },
    watch: {
      count: {
        handler(nv) {
          if(nv > 0){
            this.currentPage = 1;
            this.tableData = [];
            this.fetchData();
          }
        }
      }
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      deleteItem(id) {
        ElMessageBox.confirm(
            this.$t('删除该设备后不能恢复，确定要删除吗？'),
            this.$t('删除确认'),
            {
              confirmButtonText: this.$t('删除'),
              cancelButtonText: this.$t('取消'),
              type: 'warning',
            },
        )
            .then(async () => {
              try {
                const { data } = await deleteDevice([id]); // 使用数组传递单个 ID
                if (data.code === 0) {
                  ElMessage({
                    type: 'success',
                    message: this.$t('删除成功'),
                  });
                  this.fetchData(); // 删除后刷新数据
                } else {
                  ElMessage({
                    type: 'error',
                    message: data.message || this.$t('删除失败，请重新操作'),
                  });
                }
              } catch (error) {
                console.log(error);
                ElMessage({
                  type: 'error',
                  message: this.$t('删除请求失败，请稍后再试'),
                });
              }
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: this.$t('取消删除'),
              });
            });
      },
      //获取设备列表
      async fetchData() {
        const params = {
          page: this.currentPage,
          count: this.pageSize,
        };
        try {
          const { data } = await getDevicePage({ ...params }); // 使用封装的 API 请求方法
          if (data.code === 0) {
            this.tableData = data.data.records.map(item=>{
              return {
                ...item,
                deviceEnable: item.deviceEnable === 'Y' ? true : false,
                deviceOnline: item.deviceOnline === 'online' ? this.$t('在线') : this.$t('离线')
              }
            }); // 更新表格数据
            this.total = +data.data.total; // 更新总数据条数
            this.pageSize = +data.data.size; // 设置每页条数
          }
        } catch (error) {
          console.log(error);
        }
      },

      // 翻页处理
      handleCurrentChange(page) {
        this.currentPage = page;
        this.fetchData(); // 翻页时重新请求数据
      },

      // 每页显示条数变化处理
      handleSizeChange(size) {
        this.pageSize = size;
        this.fetchData(); // 每页条数变化时重新请求数据
      },
    },
  };
</script>

<style lang="scss" scoped>
.camera {
  .actions {
    .iconfont {
      font-size: 20px;
      transition: 0.3s ease;
      margin-right: 26px;
      cursor: pointer;

      &:hover {
        color: $color;
      }
    }
  }
  .el-button {
    transition: 0.3s ease;
    width: 126px;
    height: 42px;
    font-size: 16px;
    margin-left: 37px;

    &:hover {
      background: $color;
      border-color: $color;
      opacity: 0.8;
    }
  }

  .label-out {
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    padding: 0 0 16px;
  }
}
</style>
